<template>
	<view class="pages">
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="top">
			<view class="top1">
				<view class="toptit" :style="'margin-top:'+top+'px;'">
					比邻物业
				</view>
				<picker @change="bindPickerChange" :value="index" :range="shequ">
					<view class="top1-1">
						<view class="top1text">
							{{shequ[index]}}
						</view>
						<image src="https://x.bilinmeiju.com/static/index/向下@2x.png" style="width: 18rpx;height: 10rpx;"
							mode=""></image>
					</view>
				</picker>
			</view>

			<!-- <view v-if="istopscroll" class="topyin" :style="'height:'+CustomBar+'px;'">
				<view class=""></view>
				<view :style="'margin-top:'+top+'px;'" class="toptextyin">
					{{shequ}}
				</view>
				<view class=""></view>
			</view> -->



			<!-- 轮播 -->
			<view class="lunbo" style="margin-top: 30rpx;">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<view class="swiperview">
							<image class="swiperimg" :src="item.path" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="index-ggwk" @click="gopage('/pages/communityinfo/communityinfo',1,1)">
				<view class="index-wzwk">
					<view class="" style="color:#333333;">
						社区
					</view>
					<view class="" style="color:#2D75FC;">
						资讯
					</view>
				</view>
				<view class="centerxian" style="margin-left: 10rpx;"></view>
				<swiper class="index-ggnr" circular vertical autoplay>
					<block v-for="(item,index) in news" :key="index">
						<swiper-item catchtouchmove='catchTouchMove' @click="newsinfo(item.id)">
							<view
								style="display: flex; flex-flow:row nowrap; justify-content: start;height: 100%;align-items: center;">
								<view class="center1" :style="item.color?'background-color:'+item.color+';' : ''">
									{{item.type}}
								</view>
								<view class="center2">
									{{item.title}}
								</view>
							</view>

						</swiper-item>
					</block>
				</swiper>
			</view>


			<view class="" style="display: flex;justify-content: center;">
				<!-- <image class="cdd" src="../../static/index/cdd.png" mode=""></image>-->
			</view>
			<view class="centtit" style="margin-top: 50rpx;">
				今日巡更
			</view>
			<view class="xungeng">
				<view class="xungeng1" @click="gopage('/pages/xungeng/xungeng?type=',1,1)">
					<view class="xungeng1-1">
						{{nums[0]}}
					</view>
					<view class="xungeng1-2">
						巡更点
					</view>
				</view>
				<view class="xungeng1" @click="gopage('/pages/xungeng/xungeng?type=1',1,1)">
					<view class="xungeng1-1" style="color: #2D75FC;">
						{{nums[1]}}
					</view>
					<view class="xungeng1-2" style="color: #2D75FC;">
						已巡更
					</view>
				</view>
				<view class="xungeng1" @click="gopage('/pages/xungeng/xungeng?type=2',1,1)">
					<view class="xungeng1-1" style="color: #DB203A;">
						{{nums[2]}}
					</view>
					<view class="xungeng1-2" style="color: #DB203A;">
						未巡更
					</view>
				</view>
			</view>
			<view class="centtit" style="border-left: 12rpx solid #4ab6f8;">
				物管服务
			</view>
			<view class="title" style="margin-top: 50rpx;">
				<view class="title1" @click="gopage('/pages/gongdan/mygongdan',1,1)">
					<image class="title1img" src="/static/sylog1.png" mode=""></image>
					<view class="title1text">
						我的工单
					</view>
				</view>
				<view class="title1" @click="gopage('/pages/zhangdan/zhangdan',1,1)">
					<image class="title1img" src="/static/sylog2.png" mode=""></image>
					<view class="title1text">
						物业账单
					</view>
				</view>
				<view class="title1" @click="gopage('/pages/baoxiugongdan/baoxiugongdan',1,1)">
					<image class="title1img" src="/static/sylog3.png" mode=""></image>
					<view class="title1text">
						报修工单
					</view>
				</view>
				<view class="title1" @click="gopage('/pages/fangkepass/fangkepass',1,1)">
					<image class="title1img" src="/static/sylog4.png" mode=""></image>
					<view class="title1text">
						访客通行
					</view>
				</view>

			</view>
			<view class="title" style="margin-top: 70rpx;">
				<view class="title1" @click="gopage('/pages/carManage/carManage',1,1)">
					<image class="title1img" src="/static/sylog5.png" mode=""></image>
					<view class="title1text">
						车位管理
					</view>
				</view>
				<view class="title1" @click="gopage('/pages/chaobiao/chaobiao',1,1)">
					<image class="title1img" src="/static/sylog6.png" mode=""></image>
					<view class="title1text">
						移动抄表
					</view>
				</view>
				<view class="title1" @click="gopage('/pages/yezhuManage/yezhuManage',1,1)">
					<image class="title1img" src="/static/sylog7.png" mode=""></image>
					<view class="title1text">
						业主管理
					</view>
				</view>
				<view class="title1" @click="gopage('/pages/baoxiu/baoxiu',1,1)">
					<image class="title1img" src="/static/sylog8.png" mode=""></image>
					<view class="title1text">
						我要报修
					</view>
				</view>


			</view>



		</view>

		<box ref="box"></box>
		<!-- <image class="topimg" src="/static/index/biejing.png" mode=""></image> -->
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				box: {
					isshow: false,
					title: '提示',
					content: '',
					content2: '',
					btntitle: '知道了',
					path: ''
				},
				index: 0,
				title: 'Hello',
				communityId: '',
				CustomBar: 0,
				istopscroll: false,
				top: 0,
				nums: ['0', '0', '0'],
				token: '',
				shequ: ['请选择社区'],
				autoplay: true,
				interval: 4000,
				duration: 800,
				vering: true,
				goodslist: [],
				shequlist: [],
				news: [{
					id: 1,
					title: '比邻社区5号楼停水通知，请大家做好准备..',
					type: '社区公告'
				}, {
					id: 1,
					title: '这是一条测试数据',
					type: '社区公告'
				}],
				banner: [{
					id: 1,
					path: '../../static/sylunbo.png',
					url: ''
				}, {
					id: 1,
					path: '../../static/sylunbo.png',
					url: ''
				}]
			}
		},

		onShow() {
			var shequ = uni.getStorageSync('shequ');
			var token = uni.getStorageSync('token');
			if (shequ && token) {
				this.index = shequ;
			}
			this.token = token;
			console.log(token, 'token');
			const updateManager = wx.getUpdateManager()
			updateManager.onCheckForUpdate(function(res) {
				// 请求完新版本信息的回调
				console.log(res.hasUpdate)
			})
			updateManager.onUpdateReady(function() {
				updateManager.applyUpdate()
			})
			updateManager.onUpdateFailed(function() {
				// 新版本下载失败
			})
			if (this.token) {
				var that = this
				that.$post('wuyeapi/getcommunityids', {}, res => {
					console.log(res.data);
					if (res.data.list) {
						this.shequ = []
						this.shequlist = res.data.list
						res.data.list.forEach((item, index) => {
							this.shequ.push(item.communityName)
						})
						if (!this.communityId) {
							this.getnews(this.shequlist[this.index].communityId)
						}
					}
				})
			}
			this.getnums()
			// this.$post('api/getindex', {}).then(res => {
			// 	// this.vering = res.data.vering;
			// 	uni.setStorageSync('vering', this.vering);
			// 	// that.getnews();
			// })
		},

		onLoad(options) {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 10
			var token = uni.getStorageSync('token');
			this.token = token;

			this.communityId = uni.getStorageSync('communityId')
			// if (options.scene) {
			// 	var scene = decodeURIComponent(options.scene);
			// 	var urldata = this.geturl(scene);

			// 	if (urldata['q']) {
			// 		//如果是扫描房产二维码
			// 		if (this.token) {
			// 			uni.navigateTo({
			// 				url: '/pages/fangchanbangding/add_code?code=' + urldata['q']
			// 			})
			// 		} else {
			// 			uni.showModal({

			// 				title: '登录提示',
			// 				content: '您需要登录后进行绑定',
			// 				confirmText: '去登录',
			// 				success(e) {
			// 					if (e.confirm) {
			// 						uni.navigateTo({
			// 							url: '/pages/login/login?q=' + urldata['q']
			// 						})
			// 					}
			// 				}
			// 			})
			// 		}
			// 	}
			// }
		},
		methods: {
			bindPickerChange(e) {
				if (this.token) {
					this.index = e.detail.value
					console.log(this.shequ[e.detail.value], this.index);
					uni.setStorageSync('shequ', e.detail.value)
					this.getnews(this.shequlist[e.detail.value].communityId)
				} else {
					uni.showToast({
						title: '请登录！',
						icon: 'none'
					})
					setTimeout(res => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}
			},
			getnums() {
				this.$post('wuyecenter/xungeng', {
					p: 1,
					status: 1
				}, res => {
					this.nums = res.data.nums
				})
			},
			getnews(id) {
				if (this.token) {
					var that = this
					uni.setStorageSync('communityId', id)

					that.$post('api/getnews', {
						communityId: id
					}, res => {
						that.news = res.data.news
					})
				}

			},
			gopage(path) {
				if (this.token) {
					uni.navigateTo({
						url: path
					})
				} else {
					uni.showToast({
						title: '请登录！',
						icon: 'none'
					})
					setTimeout(res => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)

				}

			},

			gorenlian(path) {
				//判断我是否有房产
				this.$post('center/getmyroom', {}).then(res => {
					if (res.data.list.length > 0) {
						this.gopage(path);
					} else {
						this.showbind();
					}
				})
			},
			gofangke(path) {
				//判断我是否有房产
				this.$post('center/getmyroom', {}).then(res => {
					if (res.data.list.length > 0) {
						this.gopage(path);
					} else {
						this.showbind();
					}
				})
			},
			showbind() {
				var box = {
					isshow: true,
					title: '请绑定房产',
					content: '请先进行房产绑定',
					content2: '然后进行数据录入',
					btntitle: '去绑定',
					path: '/pages/fangchanbangding/fangchanbangding'
				}
				this.box = box;
				this.$refs.box.open(box)
			},
			newsinfo(id) {
				uni.navigateTo({
					url: '/pages/news/info?id=' + id
				})
			},
			gohref(path) {
				if (!path) return false;
				that.gopage(path);
			},
			// gopage(path, type) {
			// 	this.gopage(path, type, 1);
			// 	const token = uni.getSystemInfoSync('token')
			// 	if (token) {

			// 	}
			// },
			csxz() {
				uni.navigateTo({
					url: '/pages/shequgeli/chengshixuanz'
				})
			},
			fangchanbd() {
				uni.navigateTo({
					url: '/pages/fangchanbangding/fangchanbangding'
				})
			},
			geturl(url) {
				var val;
				var newurl = url;
				if (newurl) {
					var forurl = newurl.split('&');
					var pageval = new Object();
					for (var i = 0; i < forurl.length; i++) {
						var nowkey = forurl[i].split('_');
						for (var n = 0; n < nowkey.length; n++) {
							pageval[nowkey[0]] = nowkey[1]
						}
					}
				}
				if (!pageval) {
					return '';
				} else {
					return pageval;
				}
			}
		}
	}
</script>

<style>
	page {}

	.qjimg {
		width: 750rpx;
		height: 690rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}


	.topyin {
		z-index: 9;
		width: 100vw;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
	}

	.toptextyin {
		z-index: 2;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 20rpx;
	}

	.top {
		width: 100vw;
		height: 409rpx;
	}

	.topimg {
		width: 100vw;
		height: 409rpx;
		z-index: -1;
		position: absolute;
		top: 0;
	}

	.toptit {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}

	.top1 {
		margin: 0 40rpx;
		/* display: flex;
		align-items: flex-end; */
	}

	.top1-1 {
		max-width: 330rpx;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */

	}

	.top1text {
		/* height: 26px; */
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		line-height: 28rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.top2 {
		margin: 0 auto;
		margin-top: 21rpx;
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top2image {
		width: 32rpx;
		height: 30rpx;
		position: relative;
		top: 75rpx;
		left: 50rpx;
	}

	.top2-1img {
		width: 34rpx;
		height: 34rpx;
	}

	.top2input {
		width: 635rpx;
		height: 79rpx;
		radius: 30%;
		color: #F4652F;
		padding-left: 85rpx;
		background-color: rgb(255, 255, 255, 0.3);
	}

	.swiper {
		height: 295rpx;
	}

	.swiperview {
		margin: 0rpx 35rpx;
		width: 680rpx;
		height: 295rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.swiperimg {
		width: 680rpx;
		height: 295rpx;
	}

	.center {
		padding-left: 20rpx;
		width: 680rpx;
		margin: 10rpx auto;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
	}

	.centerimg {
		width: 53rpx;
		height: 52rpx;
	}

	.centerxian {
		width: 4rpx;
		height: 52rpx;
		margin: 0px 10rpx;
		background-color: darkgray;
	}

	.center1 {
		width: 77rpx;
		height: 32rpx;
		/* margin-top: 12rpx; */
		color: white;
		font-size: 16rpx;
		text-align: center;
		font-weight: 500;
		color: rgb(45, 117, 253);
		line-height: 32rpx;
		border-radius: 8rpx;
		border: 2rpx solid rgb(45, 117, 253);
	}

	.center2 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
		padding-left: 20rpx;
	}

	.title {
		width: 700rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-around;
	}

	.title1 {
		width: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.title1img {
		width: 68rpx;
		height: 68rpx;
	}

	.title1text {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		line-height: 30rpx;
		margin-top: 17rpx;
	}

	.cdd {
		width: 53rpx;
		height: 12rpx;
		margin: 40rpx auto;
	}

	.comp {
		width: 700rpx;
		margin: auto;
	}

	.compimg {
		width: 674rpx;
		height: 134rpx;
	}

	.jianbian {
		width: 700rpx;
		height: 40rpx;
		margin-top: 41rpx;
		margin: 0 auto;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		background: linear-gradient(to top, #ffffff, #FE8140)
	}

	.box1 {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box1-1 {
		width: 350rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box1-1img {
		width: 60rpx;
		height: 60rpx;

	}

	.box1-1img1 {
		width: 135rpx;
		height: 31rpx;
	}

	.box1-2 {
		width: 90rpx;
		display: flex;
		justify-content: space-around;
	}

	.box1-2text {
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #999999;
	}

	.box1-2img {
		width: 10rpx;
		height: 18rpx;
	}

	.scroll-view-item_H {
		display: flex;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 700rpx;
		margin: 0 auto;
	}

	.scroll-view1 {
		width: 183rpx;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
	}

	.scroll-view1text {
		font-size: 16rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFEFE;
		line-height: 35rpx;
		margin-bottom: -34rpx;
		margin-left: 10rpx;
		z-index: 2;
	}

	.scroll-view1text1 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		line-height: 33rpx;
	}

	.scroll-view1text2 {
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
	}

	.view-img {
		width: 86rpx;
		height: 34rpx;
		margin-bottom: -34rpx;
		z-index: 1;
	}

	.view-img2 {
		width: 183rpx;
		height: 182rpx;
	}

	.scroll-view2img {
		width: 37rpx;
		height: 37rpx;
	}

	.scroll-view2text {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FF6110;
		line-height: 35rpx;
	}

	.index-ggwk {
		background-color: rgb(255, 255, 255, 0.3);
		width: 680rpx;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 52rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		display: -webkit-flex;
	}

	.index-wzwk {
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		/* box-shadow:10rpx 0  10rpx #f5f5f5; */
	}

	.index-wzwk view {
		font-size: 30rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #333333;
		line-height: 30rpx;
	}

	.index-ggnr {
		padding-left: 10rpx;
		font-size: 22rpx;
		color: #666;
		flex: 1;
		-webkit-flex: 1;
		height: 60%;
		justify-items: center;
	}

	.centtit {
		border-left: 12rpx solid #34d6c6;
		height: 50rpx;
		width: 150rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
	}

	.xungeng {
		display: flex;
		justify-content: space-around;
	}

	.xungeng1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180rpx;
		width: 250rpx;
	}

	.xungeng1-1 {
		font-size: 55rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #DE6D00;
		line-height: 60rpx;
	}

	.xungeng1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #DE6D00;
		line-height: 40rpx;
	}
</style>
